<template >
  <div class="cart">
    <el-card class="el-card">
      <div style="text-align: center " >
        <h1 style="text-align: center " >购物车</h1>
        <table >
          <thead >
            <tr>
              <th>图片</th>
              <th style="width: 500px">名字</th>
              <th>日期</th>
              <th>价格</th>
<!--              <th>总计{{total}}</th>-->
            </tr>
          </thead>
          <tbody  v-for="([key,value],index) in mapData" :key="index" >
          <tr >
            <td >
              <router-link :to="{path:'/user/shop/shopMain',query: {id: value.id}}">
                <img :src="value.img" style="width: 150px;height: 140px">
              </router-link>
             </td>
            <td>{{value.name}}</td>
            <td>{{formattedTime(value.time)}}</td>
            <td>{{value.price}}</td>
            <td style="width: 300px">
              <el-button type="primary" round style="margin-right: 10px" @click="dialogVisible=true,numList(value.price)">付款</el-button>
              <el-button type="primary" round @click="deleteOne(value.id)">删除</el-button>
            </td>
          </tr>
          </tbody>
        </table>

        <!-- 二维码里面的内容-->
        <div style="text-align: center">
          <el-dialog
              v-model="dialogVisible" :title="'请支付'+sum+'rmb'" width="30%" :before-close="handleClose" >
            <qrcode-vue :value="qrCodeData"></qrcode-vue>
            <template #footer>
              <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">离开</el-button>
                    <el-button type="primary" @click="dialogVisible = false">完成</el-button>
              </span>
            </template>
          </el-dialog>
        </div>

      </div>
    </el-card>
  </div>
</template>

<script setup>
import {onBeforeMount, ref,inject,computed} from "vue";
import * as cartApi from '@/api/cart.js'
import {ElNotification} from "element-plus";
import QrcodeVue from 'qrcode.vue'
const reload = inject('reload')
const mapData = ref(new Map());
const list = ref('')
const sum = ref()
const numlist = ref(["11","22"])
const dialogVisible = ref(false)
const allPay = ref(false)
onBeforeMount(()=>{
  cartApi.selectCart().then(resp=>{
    const data =resp.data
    for (const [key, value] of Object.entries(data)) {
      mapData.value.set(key, JSON.parse(value));
    }

  })
})

const deleteOne=(cardId)=>{
  cartApi.deleteCart(cardId).then(resp=>{
    if (resp.msg!='success'){
      ElNotification({
        message: resp.msg,
        type: 'error',
      })
    }else{
      ElNotification({
        message: '删除成功',
        type: 'success',
      })
    }
  }),
      reload()

}
const formattedTime =(dateTime)=> {
  // 获取年、月、日、时、分、秒等信息
  const date = new Date(dateTime);
  console.log(dateTime)
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  const seconds = String(date.getSeconds()).padStart(2, '0');
  console.log(`${year}-${month}-${day} ${hours}:${minutes}:${seconds}`)
  return `${year}-${month}-${day}`;
}

const numList=(num)=>{
  // numlist.value.push(num)
  // const total = numlist.value.reduce((acc, curr) => acc + curr, 0);
  // console.log(total)
  sum.value = num
}

// const total = computed(() => {
//   return numlist.value.reduce((acc, curr) => acc + curr, 0);
// });
</script>

<style scoped>
.cart{
  caret-color: transparent;
  margin-right: 70px;
  margin-left: 70px;
  height: 2000px;

}

h1{
  font-family:STCaiyun;
  font-size:60px;
  margin: 0;
  color:  #fcd3d3;
}
th{
  text-align: center;
  width: 200px;


}
.el-card{
  background-color: #d9ecff
}
</style>
